<template>
  <div id="app">
    <div @click="viewEvent">
      <router-view/>
    </div>
    <div class="r-info-center" v-if="me.sysUser.userId&&route.path!=='/liveRoom'">
      <div class="r-info-g" id="info_center_g">
        <a href="javascript:void(0)" v-if="me.sysUser.authType!=='3'" class="r-info-g-i" :class="{'on': showItem === 'plan'}" @click="changeTab('plan')" info_g>
          <span :class="{'red-tip': news.hasNewsPlanPage === 1}"></span>
          <i class="icon plan"></i>计划</a>
        <a href="javascript:void(0)" class="r-info-g-i" :class="{'on': showItem === 'viewpoint'}" @click="changeTab('viewpoint')" info_g>
          <span :class="{'red-tip': news.hasNewsViewpointPage === 1}"></span>
          <i class="icon point"></i>观点</a>
        <a href="javascript:void(0)" class="r-info-g-i" :class="{'on': showItem === 'question'}" @click="changeTab('question')" info_g>
          <span :class="{'red-tip': news.hasNewsQuestionPage === 1}"></span>
          <i class="icon answer"></i>问答</a>
        <a href="javascript:void(0)" class="r-info-g-i" :class="{'on': showItem === 'notice'}" @click="changeTab('notice')" info_g>
          <!-- <span :class="{'red-tip': news.hasNewsNoticePage === 1}"></span> -->
          <i class="icon inform"></i>通知</a>
      </div>
      <!-- <transition name="fade"> -->
      <div class="r-info-c hide" :class="show? 'active': ''">
        <!-- 用户-计划 -->
        <div v-if="!loading" class="r-info-point item-info" :class="{'active': showItem === 'plan'}">
          <div class="r-info-h">
            <span class="r-info-tit ftz16">{{news.userType === 0? '已购计划动态':'已售计划动态'}}</span>
            <a v-show="editItem!=='plan'&&news.data.total>0" href="javascript:void(0)" class="fr c80" @click="editEvent('plan')" editor>编辑</a>
            <span class="fr edit-handle" :class="{'active': editItem === 'plan'}" editor_c>
              <a href="javascript:void(0)" class="c80" @click="checkAll" selAll>全选</a>
              <a href="javascript:void(0)" class="c80" @click="removeEvent" del>删除</a>
              <a href="javascript:void(0)" class="c80" @click="cancleEdit()" cancle>取消</a>
            </span>
          </div>
          <div class="r-info-p-c" info_list_c>
            <div class="no-info" v-if="!news.data.total">
              <span class="icon"></span>
              暂无动态
              <div class="more-p">
                <b class="ftz18">一大波优秀计划等你来抢</b>
                <a href="javascript: void(0)" @click="$router.push('/plan')" class="more">马上去抢</a>
              </div>
            </div>
            <div class="r-info-list">
              <ul>
                <li v-if="news.userType === 0" v-for="(item, index) in news.data.list" :key="index">
                  <input v-show="editItem === 'plan'&&news.data.total>0" v-model="checkList" :value="item.newsPlanId" type="checkbox">
                  <a href="javascript: void(0)" class="r-info-p-tit" :class="{'read': item.status === 1}" @click="linkTo(item)">{{item.title}}</a>
                  <span class="r-info-p-txt">
                    <span info-p-txt v-html="item.content"></span>
                  </span>
                  <div class="tip">
                    <span>{{item.planUserName}}</span>
                    <span class="fr">{{item.articleCreateTime | parseTime('{m}-{d} {h}:{i}')}}
                      <i style="cursor: pointer;padding-left: 10px;" @click="linkTo(item)">查看详情></i>
                    </span>
                  </div>
                </li>
                <li v-if="news.userType === 1" v-for="(item, index) in news.data.list" :key="index">
                  <input v-show="editItem === 'plan'" v-model="checkList" :value="item.newsPlanId" type="checkbox">
                  <!-- <a href="javascript: void(0)" class="r-info-p-tit" @click="linkTo(item)">{{item.title}}</a> -->
                  <span class="r-info-p-txt tip" :class="{'read': item.status === 1}">{{item.buyUserName}}&nbsp;&nbsp;购买了您的计划
                    <i @click="linkTo(item)" style="cursor:pointer;">{{item.planName}}</i>
                  </span>
                  <div>
                    <span>{{item.planBuyTime | parseTime('{m}-{d} {h}:{i}')}}
                      <i @click="linkTo(item)" style="cursor: pointer;padding-left: 10px;">查看详情></i>
                    </span>
                    <i class="fr">
                      <i class="icon-coin"></i>{{item.cost}}</i>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 用户-观点 -->
        <div v-if="!loading" class="r-info-point item-info" :class="{'active': showItem === 'viewpoint'}">
          <div class="r-info-h" v-if="news.userType === 0">
            <span class="r-info-tit ftz16 on">关注理投师观点动态</span>
            <a v-show="editItem !== 'viewpoint'&&viewpointNews.data.newsViewpointPageNoReply.total>0&&viewpointTab === '1'" href="javascript:void(0)" class="fr c80" @click="editEvent('viewpoint')" editor>编辑</a>
            <span class="fr edit-handle" :class="{'active': editItem === 'viewpoint'}" editor_c>
              <a href="javascript:void(0)" class="c80" @click="checkAll" selAll>全选</a>
              <a href="javascript:void(0)" class="c80" @click="removeEvent" del>删除</a>
              <a href="javascript:void(0)" class="c80" @click="cancleEdit()" cancle>取消</a>
            </span>
          </div>
          <div class="r-info-ans" v-if="news.userType === 1">
            <div class="r-info-h">
              <a href="javascript:void(0)" @click="changeViewpointTab('1')" class="r-info-tit ftz16" :class="{'on': this.viewpointTab === '1'}">待回复</a>
              <a href="javascript:void(0)" @click="changeViewpointTab('2')" class="r-info-tit ftz16" :class="{'on': this.viewpointTab === '2'}">已回复</a>
            </div>
          </div>

          <div class="r-info-p-c" info_list_c>
            <div class="no-info" v-if="!viewpointNews.data.newsViewpointPageNoReply.total&&viewpointTab === '1'">
              <span class="icon"></span>
              暂无动态
              <div class="more-p">
                <b class="ftz18">最有价值的观点都在这里！</b>
                <a href="javascript: void(0)" @click="$router.push('/viewpoint')" class="more">马上去看看</a>
              </div>
            </div>
            <div class="r-info-list">
              <ul>
                <li v-if="viewpointTab === '1'&&news.userType === 0" v-for="(item, index) in viewpointNews.data.newsViewpointPageNoReply.list" :key="index">
                  <input v-show="editItem === 'viewpoint'" v-model="checkList" :value="item.newsViewpointId" type="checkbox">
                  <a href="javascript:void(0)" class="r-info-p-tit ellipsis" :title="item.title" :class="{'read': item.status === 1}">{{item.title}}</a>
                  <span class="r-info-p-txt">
                    <span info-p-txt>{{item.summary}}</span>
                  </span>
                  <div class="tip">
                    <span>
                      <i>{{item.viewpointUserName}}</i>
                    </span>
                    <span>分类：{{item.classify}}</span>
                    <span class="fr">{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}
                      <i @click="linkTo(item)" style="cursor: pointer;padding-left: 10px;">查看详情></i>
                    </span>
                  </div>
                </li>
                <li v-if="viewpointTab === '1'&&news.userType === 1" v-for="(item, index) in viewpointNews.data.newsViewpointPageNoReply.list" :key="index">
                  <div class="margin-bottom-5">
                    <span><img :src="item.avatar" class="question-avatar margin-right-5">{{item.userName}}</span>
                    <span @click="linkTo(item, 'bottom')" style="display: inline-block;line-height: 30px;cursor:pointer;" class="fr">
                      <span class="icon-reply"></span>回答</span>
                  </div>
                  <a href="javascript: void(0)" class="r-info-ans-tit" :class="{'read': item.status === 1}">
                    <i class="icon"></i>
                    {{item.comment}}
                  </a>
                  <div class="tip margin-top-5" style="background: rgb(227, 227, 227);padding: 7px;cursor:pointer;">
                    {{item.viewpointTitle}}
                  </div>
                  <div class="margin-top-5">{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}
                    <i @click="linkTo(item)" style="cursor: pointer;padding-left: 10px;">查看详情></i>
                  </div>
                </li>
                <li v-if="viewpointTab === '2'&&news.userType === 1" v-for="(item, index) in viewpointNews.data.newsViewpointPageReply.list" :key="index">
                  <div class="margin-bottom-5">
                    <span><img :src="item.avatar" class="question-avatar margin-right-5">{{item.userName}}</span>
                    <span @click="linkTo(item)" style="display: inline-block;line-height: 30px;cursor: pointer;" class="fr">
                      查看详情</span>
                  </div>
                  <a href="javascript: void(0)" class="r-info-ans-tit" :class="{'read': item.status === 1}">
                    <i class="icon"></i>
                    {{item.replyContent}}
                  </a>
                  <div class="tip margin-top-5" style="background: rgb(227, 227, 227);padding: 7px;">
                    {{item.comment}}
                  </div>
                  <div class="margin-top-5">{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 用户-问答 -->
        <div v-if="!loading" class="r-info-ans item-info" :class="{'active': showItem === 'question'}">
          <div class="r-info-h">
            <a href="javascript:void(0)" @click="changeQuestionTab('1')" class="r-info-tit ftz16" :class="{'on': this.questionTab === '1'}">待回答</a>
            <a href="javascript:void(0)" @click="changeQuestionTab('2')" class="r-info-tit ftz16" :class="{'on': this.questionTab === '2'}">已回答</a>
          </div>
          <div class="r-info-p-c" info_list_c>
            <div class="no-info" v-if="!questionNews.data.newsQuestionNoReplyPage.total&&questionTab === '1'">
              <span class="icon"></span>
              暂无动态
              <div class="more-p">
                <b class="ftz18">选股难？解套难？</b>
                <a href="javascript:void(0)" @click="$router.push('/qa')" class="more">马上去问问</a>
              </div>
            </div>
            <div class="r-info-list">
              <!-- 待回答 -->
              <ul ans>
                <li v-if="questionTab === '1'" v-for="(item, index) in questionNews.data.newsQuestionNoReplyPage.list" :key="index">
                  <div v-if="news.userType===1" class="margin-bottom-5">
                    <span><img :src="item.avatar" class="question-avatar margin-right-5">{{item.questionUserName}}</span>
                    <span v-show="item.invalid !== 1" @click="linkTo(item, )" style="display: inline-block;line-height: 30px;cursor: pointer;" class="fr">
                      <span class="icon-reply"></span>回答</span>
                  </div>
                  <img v-if="item.invalid === 1" style="position: absolute;top: 20px;right: 0;" src="./assets/res/img/invalid.png" alt="">
                  <a href="javascript: void(0)" @click="linkTo(item)" class="r-info-ans-tit" :class="{'read': item.status === 1}">
                    <i class="icon"></i>
                    {{item.title}}
                  </a>
                  <div class="tip">
                    <span>{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}
                      <span v-if="news.userType===0">向
                        <i>{{item.receiveUserName}}</i>&nbsp;&nbsp;提问
                        <i @click="linkTo(item)" style="cursor: pointer;padding-left: 10px;">查看详情></i>
                      </span>
                    </span>
                    <span class="fr">分类：{{item.fieldName}}</span>
                  </div>
                </li>
                <li v-if="questionTab === '2'" v-for="(item, index) in questionNews.data.newsQuestionReplyPage.list" :key="index">
                  <div v-if="news.userType===1" class="margin-bottom-5">
                    <span><img :src="item.avatar" class="question-avatar margin-right-5">{{item.questionUserName}}</span>
                    <span @click="linkTo(item)" style="display: inline-block;line-height: 30px;cursor: pointer;" class="fr">
                      查看详情</span>
                  </div>
                  <a href="javascript: void(0)" class="r-info-ans-tit" :class="{'read': item.status === 1}" @click="linkTo(item)">
                    <i class="icon"></i>
                    {{item.title}}
                  </a>
                  <div class="tip">
                    <span>{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}
                      <span v-if="news.userType===0">向
                        <i>{{item.receiveUserName}}</i>&nbsp;&nbsp;提问</span>
                      <i @click="linkTo(item)" style="cursor: pointer;padding-left: 10px;">查看详情></i>
                    </span>
                    <span class="fr">分类：{{item.fieldName}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 用户-通知 -->
        <div v-if="!loading" class="r-info-plan item-info" :class="{'active': showItem === 'notice'}">
          <div class="r-info-h">
            <span class="r-info-tit ftz16">系统通知</span>
            <a v-show="editItem !== 'notice'&&news.data.total>0" href="javascript:void(0)" class="fr c80" @click="editEvent('notice')">编辑</a>
            <span class="fr edit-handle" :class="{'active': editItem === 'notice'}" editor_c>
              <a href="javascript:void(0)" class="c80" @click="checkAll" selAll>全选</a>
              <a href="javascript:void(0)" class="c80" @click="removeEvent" del>删除</a>
              <a href="javascript:void(0)" class="c80" @click="cancleEdit()" cancle>取消</a>
            </span>
          </div>
          <div class="r-info-p-c" info_list_c>
            <div class="no-info" v-if="!news.data.total">
              <span class="icon"></span>
              暂无通知
            </div>
            <div class="r-info-list">
              <ul>
                <li v-for="(item, index) in news.data.list" :key="index">
                  <input v-show="editItem === 'notice'&&news.data.total>0" v-model="checkList" :value="item.newsNoticeId" type="checkbox">
                  <p class="">{{item.content}}</p>
                  <span class="fr c80">{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div id="noticePage" v-show="noticeTotal"></div>
      </div>
      <!-- </transition> -->
    </div>
    <div v-if="route.path!=='/liveRoom'" class="contact-code">
      <img src="./assets/contact-code.jpg" alt="">
      <p style="text-align:center;">客服二维码</p>
    </div>
  </div>
</template>

<script>
import './style/index.scss'
import './style/iconfont/iconfont.css'
import { mapState } from 'vuex'
import * as api from '@/service/api'
export default {
  name: 'App',
  data () {
    return {
      show: false,
      loading: false,
      showItem: '',
      editItem: '',
      checkList: [],
      autoNews: null,
      questionTab: '1',
      viewpointTab: '1',
      noticeTotal: 0,
      news: {
        data: {}
      },
      questionNews: {
        data: {
          newsQuestionNoReplyPage: {},
          newsQuestionReplyPage: {}
        }
      },
      viewpointNews: {
        data: {
          newsViewpointPageNoReply: {},
          newsViewpointPageReply: {}
        }
      },
      typeList: {
        plan: 3,
        viewpoint: 4,
        question: 2,
        notice: 1
      },
      searchData: {
        pageNum: 1,
        pageSize: 5,
        type: '2'
      }
    }
  },
  computed: {
    ...mapState({
      me: state => state.me
    }),
    route () {
      return this.$route
    }
  },
  created () {
    this.getNews()
    this.cyclicNews()
  },
  destroyed () {
    clearInterval(this.autoNews)
  },
  methods: {
    async getNews () {
      if (!this.me.sysUser.userId) {
        clearInterval(this.autoNews)
        return false
      }
      this.loading = true
      clearInterval(this.autoNews)
      this.searchData.type = this.typeList[this.showItem] || 1
      let res = await api.getNews({ ...this.searchData })
      if (this.showItem === 'question') {
        this.news = res.data
        this.questionNews = res.data
        if (this.questionTab === '1') {
          this.noticeTotal = this.news.data.newsQuestionNoReplyPage.total
        } else {
          this.noticeTotal = this.news.data.newsQuestionReplyPage.total
        }
      } else if (this.showItem === 'viewpoint') {
        this.news = res.data
        if (!res.data.hasOwnProperty('newsViewpointPageReply') && this.news.userType === 0) {
          res.data.data['newsViewpointPageReply'] = {}
        }
        this.viewpointNews = res.data
        if (this.viewpointTab === '1') {
          this.noticeTotal = this.news.data.newsViewpointPageNoReply.total
        } else {
          this.noticeTotal = this.news.data.newsViewpointPageReply.total
        }
      } else {
        this.news = res.data
        this.noticeTotal = this.news.data.total
      }
      if (this.searchData.pageNum === 1) {
        this.init()
      }
      this.loading = false
      this.cyclicNews()
    },
    async readNews (id) {
      await api.readNews({
        type: this.typeList[this.showItem],
        newsId: id
      })
      // window.layer.msg('已标记已读')
    },
    removeEvent () {
      let that = this
      let ids = that.checkList.join(',')
      if (!ids) {
        window.layer.msg('请选择')
        return false
      }
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认删除吗</div>',
        btn: '确认',
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.removeNews()
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    async removeNews () {
      let ids = this.checkList.join(',')
      await api.removeNews({
        type: this.typeList[this.showItem],
        newsIds: ids
      })
      this.searchData.pageNum = 1
      this.checkList = []
      this.getNews()
      window.layer.msg('删除成功')
    },
    linkTo (item, scroll) {
      if (this.showItem === 'plan') {
        this.readNews(item.newsPlanId)
        if (this.news.userType === 1) {
          // if (scroll === 'bottom') {
          //   this.$router.push(`/plan/${item.planId}?scroll=bottom`)
          // } else {
          this.$router.push(`/plan/${item.planId}`)
          // }
        } else {
          // if (scroll === 'bottom') {
          //   this.$router.push(`/planarticle/${item.articleId}?scroll=bottom`)
          // } else {
          this.$router.push(`/planarticle/${item.articleId}`)
          // }
        }
      } else if (this.showItem === 'viewpoint') {
        this.readNews(item.newsViewpointId)
        if (scroll === 'bottom') {
          this.$router.push(`/articleDetails/${item.viewpointId}?scroll=bottom`)
        } else {
          this.$router.push(`/articleDetails/${item.viewpointId}`)
        }
      } else if (this.showItem === 'question') {
        this.readNews(item.newsQuestionId)
        this.$router.push(`/qa/${item.questionId}`)
      }
      // this.showItem = ''
      this.show = false
    },
    cyclicNews () {
      if (!this.me.sysUser.userId) {
        clearInterval(this.autoNews)
        return false
      }
      clearInterval(this.autoNews)
      this.autoNews = setInterval(() => {
        this.getNews()
      }, 15000)
    },
    editEvent (tab) {
      this.editItem = tab
    },
    changeTab (tab) {
      this.show = true
      this.showItem = tab
      this.searchData.pageNum = 1
      this.getNews()
      return false
    },
    changeQuestionTab (tab) {
      this.searchData.pageNum = 1
      this.questionTab = tab
      if (tab === '1') {
        this.noticeTotal = this.news.data.newsQuestionNoReplyPage.total
      } else {
        this.noticeTotal = this.news.data.newsQuestionReplyPage.total
      }
    },
    changeViewpointTab (tab) {
      this.viewpointTab = tab
      this.searchData.pageNum = 1
      if (tab === '1') {
        this.noticeTotal = this.viewpointNews.data.newsViewpointPageNoReply.total
      } else {
        this.noticeTotal = this.viewpointNews.data.newsViewpointPageReply.total
      }
    },
    viewEvent () {
      this.show = false
      this.showItem = ''
      this.questionTab = '1'
      this.viewpointTab = '1'
      this.searchData.pageNum = 1
      // this.news = {
      //   data: {}
      // }
      // this.questionNews = {
      //   data: {
      //     newsQuestionNoReplyPage: {},
      //     newsQuestionReplyPage: {}
      //   }
      // }
      // this.viewpointNews = {
      //   data: {
      //     newsViewpointPageNoReply: {},
      //     newsViewpointPageReply: {}
      //   }
      // }
      return false
    },
    checkAll () {
      if (this.showItem === 'viewpoint') {
        this.viewpointNews.data.newsViewpointPageNoReply.list.map((item, index) => {
          this.checkList.push(item.newsViewpointId)
        })
      } else if (this.showItem === 'notice') {
        this.news.data.list.map((item, index) => {
          this.checkList.push(item.newsNoticeId)
        })
      } else if (this.showItem === 'plan') {
        this.news.data.list.map((item, index) => {
          this.checkList.push(item.newsPlanId)
        })
      }
    },
    changePage (page) {
      this.searchData.pageNum = page
      this.getNews()
    },
    cancleEdit () {
      this.editItem = ''
      this.checkList = []
    },
    init () {
      let that = this
      this.loading = false
      window.layui.use('laypage', function () {
        window.layui.laypage.render({
          elem: 'noticePage',
          count: that.noticeTotal, // 数据总数，从服务端得到
          curr: that.searchData.pageNum,
          limit: that.searchData.pageSize, // 每页显示的条数
          jump: function (obj, first) {
            // 首次不执行
            if (!first) {
              // do something
              that.changePage(obj.onr)
            }
          }
        })
      })
      // setTimeout(() => {
      //   if (window.layer) {
      //     window.layer.closeAll(this.layerLoad)
      //   }
      // }, 500)
    }
  }
}
</script>

<style lang="scss">
#app {
  height: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  /* color: #2c3e50; */
  /* margin-top: 60px; */
  .ellipsis {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .contact-code{
    position: fixed;
    bottom: 20px;
    right: 10px;
    border-radius: 6px;
    padding: 4px 4px 8px;
    background-color: #fff;
    img{
      width: 127px;
      height: 127px;
    }
  }
  #noticePage{
    text-align: center;
  }
  .r-info-list {
    max-height: 650px;
    overflow: auto;
  }
  .r-info-center {
    // max-height: 100%;
    // overflow: auto;
    .r-info-ans-tit {
      font-weight: bold;
    }
    .question-avatar {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    .icon-reply {
      display: inline-block;
      background: url("./assets/res/img/icon_info.png") no-repeat -248px 0;
      width: 25px;
      height: 20px;
      vertical-align: middle;
    }
    .r-info-c {
      // width: 0;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      transition: all 0.5s;
      .item-info {
        width: 375px;
        overflow: hidden;
        display: none;
      }
      .item-info.active {
        display: block;
      }
    }
    .r-info-g-i {
      position: relative;
    }
    .red-tip {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #f23e3e;
      border-radius: 50%;
      top: 5px;
      left: 5px;
    }

    .r-info-c.hide {
      width: 0;
      transition: all 0.5s;
    }
    .r-info-c.active {
      width: 375px;
      transition: all 0.5s;
    }
    .edit-handle {
      display: none;
    }
    .edit-handle.active {
      display: block;
    }
    .read {
      font-weight: normal;
    }
  }
}
</style>
